<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    标签名选择器
    ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    类名选择器
    .big{
        font-width: bold;
        font-size: 20px;
        color: blue;
        text-align: center;
    }
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: red;
        }
        id选择器
        #con{
            display: flex;
            flex-wrap: wrap;
        }
        后代选择器
        div p{
            color: blue;
        }
        子代选择器
        div>p{
            color: green;
        }
        全局选择器
        *{
        }
        并集选择器
        .a,span{}

    </style>
</head>
<body>
<div>
    <p>1</p>
</div>
<p>2</p>

<ul id="con">
    <li class="big">0</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<div>head</div>

</body>
</html>